import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [keywords, setKeywords] = useState([]);
  const [articles, setArticles] = useState([]);
  const [newKeyword, setNewKeyword] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    loadKeywords();
    loadArticles();
  }, []);

  const loadKeywords = async () => {
    try {
      const response = await axios.get('/api/keywords');
      setKeywords(response.data);
    } catch (error) {
      console.error('加载关键词失败:', error);
    }
  };

  const loadArticles = async () => {
    try {
      const response = await axios.get('/api/articles');
      setArticles(response.data);
    } catch (error) {
      console.error('加载文章失败:', error);
    }
  };

  const addKeyword = async () => {
    if (!newKeyword.trim()) return;
    
    try {
      await axios.post('/api/keywords', { keyword: newKeyword });
      setNewKeyword('');
      loadKeywords();
    } catch (error) {
      alert('添加关键词失败: ' + error.response?.data?.detail || error.message);
    }
  };

  const collectArticles = async () => {
    setLoading(true);
    try {
      await axios.post('/api/collect');
      loadArticles();
      alert('文章收集完成！');
    } catch (error) {
      alert('收集文章失败: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>专业领域资讯服务</h1>
      </header>
      
      <main>
        <section className="keywords-section">
          <h2>关键词管理</h2>
          <div className="add-keyword">
            <input
              type="text"
              value={newKeyword}
              onChange={(e) => setNewKeyword(e.target.value)}
              placeholder="输入关键词"
            />
            <button onClick={addKeyword}>添加</button>
          </div>
          <div className="keywords-list">
            {keywords.map(keyword => (
              <div key={keyword.id} className="keyword-item">
                <span>{keyword.keyword}</span>
                <span className="category">{keyword.category}</span>
              </div>
            ))}
          </div>
        </section>

        <section className="articles-section">
          <h2>文章列表</h2>
          <button onClick={collectArticles} disabled={loading}>
            {loading ? '收集中...' : '收集文章'}
          </button>
          <div className="articles-list">
            {articles.map(article => (
              <div key={article.id} className="article-item">
                <h3>{article.title}</h3>
                <p>{article.summary}</p>
                <div className="article-meta">
                  <span>来源: {article.source}</span>
                  <span>分类: {article.category}</span>
                </div>
                {article.url && (
                  <a href={article.url} target="_blank" rel="noopener noreferrer">
                    阅读原文
                  </a>
                )}
              </div>
            ))}
          </div>
        </section>
      </main>
    </div>
  );
}

export default App;